<template>
  <div style="margin-left: 0%">
    <el-row>
      <el-col :span="7" v-for="(o, index) in course" :key="index" :offset="index > 0 ? 1 : 1">
        <el-card :body-style="{ padding: '5px' }">
          <img style="width: 380px;height: 150px" :src="o.coursePic" class="image">
          <div style="padding: 30px;">
            <span>{{o.courseName}}</span>
            <div class="bottom clearfix">
              <time  class="time">{{ o.courseDescription | ellipsis}}</time>
              <el-button type="text" @click="coursePub(o.id)" class="button">点击观看</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "",
    data(){
      return{
        course:[]
      }
    },
    methods:{
      findOrder:function () {
        axios.post("userapi/qflive-order/order/findCourseByUserid").then(res=>{
          if (res.data.success){
            this.course=res.data.queryResult.list
          }
        })
      },
      coursePub(id){
        console.log(id)
        this.$router.push({name:"learningVideo",params: { id: id }})
      }
    },
    mounted(){
      this.findOrder();
    },
    filters: {
      ellipsis(value) {
        if (!value) return "";
        if (value.length > 30) {
          return value.slice(0, 30) + "...";
        }
        return value;
      }
    }

  }
</script>

<style scoped>

</style>
